<template>
  <div class="box">
    <div class="f1">
      <div class="f1_content">
        <div class="goHome" @click="goHome">
          <img src="@/assets/flow/首页.png" alt="" />返回主页
        </div>
        <ul>
          <li v-for="(item, index) in list" :key="item.num">
            <h6>
              <span>{{ item.num }} </span>{{ item.str }}
            </h6>
            <template v-if="item.num == '01'">
              <img class="quan" src="@/assets/home/组75.png" alt="" />
              <img class="line" src="@/assets/home/组73.png" alt="" />
            </template>
            <template v-else>
              <template v-if="item.num == '02'">
                <img class="quan" src="@/assets/home/组71.png" alt="" />
                <img class="line" src="@/assets/home/组72.png" alt="" />
              </template>
              <template v-else>
                <img class="quan" src="@/assets/home/组71-2.png" alt="" />
                <img
                  class="line"
                  v-show="index !== list.length - 1"
                  src="@/assets/home/组74.png"
                  alt=""
                />
              </template>
            </template>
          </li>
        </ul>
      </div>
    </div>
    <div class="f2" v-loading="loading">
      <div class="content">
        <div class="hint" style="margin-bottom: 40px; height: 32px">
          <p>
            业务相关行政许可信息、专利信息、商标信息、高新技术认证信息、体系信息、外贸产品认证信息、进出口资质信息、荣誉信息均为选填，您可自行选择，资料上传越完整，综合认证等级越高
          </p>
        </div>
        <div class="title">
          <h6></h6>
          业务相关行政许可信息
        </div>
        <div class="f2_content">
          <template v-if="ruleForm.xgxzxk == '是'">
            <!-- 表单 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="180px"
              class="demo-ruleForm"
            >
              <el-form-item label="是否有相关行政许可" prop="xgxzxk">
                <el-radio-group v-model="ruleForm.xgxzxk" @input="group">
                  <el-radio label="是" value="true"></el-radio>
                  <el-radio label="否" value="false"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="行政许可名称" prop="xzxkmc">
                <el-input v-model="ruleForm.xzxkmc"></el-input>
              </el-form-item>
              <el-form-item label="行政许可决定书文编号" prop="xzxkjdwbh">
                <el-input v-model="ruleForm.xzxkjdwbh"></el-input>
              </el-form-item>
              <el-form-item label="有效期至" prop="yxqz">
                <el-date-picker
                  v-model="ruleForm.yxqz"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
            <!-- 证件文件 -->
            <div class="license license1" style="">
              <span class="aaa11"
                ><span style="color: #f25757">*</span>证件文件
              </span>
              <!-- 图片上传 -->
              <el-upload
                action="#"
                class="permit el-upload--picture-card"
                list-type="picture-card"
                :auto-upload="false"
                :on-change="handleChangeBusiness"
                :http-request="uploadFileBusiness"
                ref="pictureUpload1"
                :file-list="YWXGXZXKZS"
              >
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      class="el-upload-list__item-delete"
                      @click="handleRemove1(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <div class="license-right1">
                <div>
                  <p>说明：</p>
                  <p>1.上传文件大小不超过5M；</p>
                  <p>2.仅支持jpeg、png、jpg格式文件；</p>
                  <p style="color: #f00">3.需加盖公章。</p>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <!-- 表单 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="180px"
              class="demo-ruleForm"
            >
              <el-form-item label="是否有相关行政许可" prop="xgxzxk">
                <el-radio-group v-model="ruleForm.xgxzxk" @input="group">
                  <el-radio label="是" value="true"></el-radio>
                  <el-radio label="否" value="false"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </template>
        </div>

        <div>
          <div class="title">
            <h6></h6>
            专利信息
          </div>
          <div class="f2_contents">
            <div class="license license1" style="">
              <el-upload
                multiple
                action="#"
                class="upload-demo"
                :auto-upload="false"
                :on-change="handleChangeBusinessZlxx"
                :http-request="uploadFileBusiness"
                :file-list="fileListZlxxList"
                :limit="limit"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  （1.上传文件大小不超过5M；2.支持上传多个文件。）
                </div>
              </el-upload>
            </div>
            <!-- 表格 -->
            <div id="datatable" v-if="fileListZlxx.length != 0">
              <el-table
                :data="fileListZlxx"
                border
                style="width: 800px"
                stripe
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D',
                }"
              >
                <el-table-column
                  prop=""
                  label="序号"
                  min-width="8%"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="oldfilename"
                  label="文件名称"
                  align="center"
                  min-width="50%"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  min-width="20%"
                >
                  <template slot-scope="scope">
                    <span
                      class="span"
                      @click="examine(scope.$index, fileListZlxx)"
                      >查看</span
                    >
                    <span
                      class="span span1"
                      @click="del(scope.$index, fileListZlxx)"
                      >删除</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="title">
            <h6></h6>
            商标信息
          </div>
          <div class="f2_contents">
            <div class="license license1" style="">
              <el-upload
                multiple
                action="#"
                class="upload-demo"
                :auto-upload="false"
                :on-change="handleChangeBusinessSbxx"
                :http-request="uploadFileBusiness"
                :file-list="fileListSbxxList"
                :limit="limit"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  （1.上传文件大小不超过5M；2.支持上传多个文件。）
                </div>
              </el-upload>
            </div>
            <!-- 表格 -->
            <div id="datatable" v-if="fileListSbxx.length != 0">
              <el-table
                :data="fileListSbxx"
                border
                style="width: 800px"
                stripe
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D',
                }"
              >
                <el-table-column
                  prop=""
                  label="序号"
                  min-width="8%"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="oldfilename"
                  label="文件名称"
                  align="center"
                  min-width="50%"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  min-width="20%"
                >
                  <template slot-scope="scope">
                    <span
                      class="span"
                      @click="examine(scope.$index, fileListSbxx)"
                      >查看</span
                    >
                    <span
                      class="span span1"
                      @click="del(scope.$index, fileListSbxx)"
                      >删除</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="title">
            <h6></h6>
            高新技术认证
          </div>
          <div class="f2_contents">
            <div class="license license1" style="">
              <el-upload
                multiple
                action="#"
                class="upload-demo"
                :auto-upload="false"
                :on-change="handleChangeBusinessGxjsrz"
                :http-request="uploadFileBusiness"
                :file-list="fileListGxjsrzList"
                :limit="limit"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  （1.上传文件大小不超过5M；2.支持上传多个文件。）
                </div>
              </el-upload>
            </div>
            <!-- 表格 -->
            <div id="datatable" v-if="fileListGxjsrz.length != 0">
              <el-table
                :data="fileListGxjsrz"
                border
                style="width: 800px"
                stripe
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D',
                }"
              >
                <el-table-column
                  prop=""
                  label="序号"
                  min-width="8%"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="oldfilename"
                  label="文件名称"
                  align="center"
                  min-width="50%"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  min-width="20%"
                >
                  <template slot-scope="scope">
                    <span
                      class="span"
                      @click="examine(scope.$index, fileListGxjsrz)"
                      >查看</span
                    >
                    <span
                      class="span span1"
                      @click="del(scope.$index, fileListGxjsrz)"
                      >删除</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="title">
            <h6></h6>
            体系认证信息
            <el-tooltip class="item" effect="dark" content="" placement="top">
              <div slot="content">
                ISO 9001认证、ISO 14001认证、OHSAS
                18001认证、能源管理体系认证、ISO/IEC 27001认证、
                <br />ISO/IEC 20000认证、ISO 13485认证、ISO 10015认证、IATF
                16949认证、IQNet认证、<br />SA 8000认证、IQNet
                SR10认证、供应链安全管理体系认证、资产管理体系认证、<br />业务连续性管理体系认证、商品售后服务认证、物流服务认证等
              </div>

              <h1><img src="@/assets/image/提示.png" alt="" /></h1>
            </el-tooltip>
          </div>
          <div class="f2_contents">
            <div class="license license1" style="">
              <el-upload
                multiple
                action="#"
                class="upload-demo"
                :auto-upload="false"
                :on-change="handleChangeBusinessTxrzxx"
                :http-request="uploadFileBusiness"
                :limit="limit"
                :file-list="fileListTxrzxxList"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  （1.上传文件大小不超过5M；2.支持上传多个文件。）
                </div>
              </el-upload>
            </div>
            <!-- 表格 -->
            <div id="datatable" v-if="fileListTxrzxx.length != 0">
              <el-table
                :data="fileListTxrzxx"
                border
                style="width: 800px"
                stripe
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D',
                }"
              >
                <el-table-column
                  prop=""
                  label="序号"
                  min-width="8%"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="oldfilename"
                  label="文件名称"
                  align="center"
                  min-width="50%"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  min-width="20%"
                >
                  <template slot-scope="scope">
                    <span
                      class="span"
                      @click="examine(scope.$index, fileListTxrzxx)"
                      >查看</span
                    >
                    <span
                      class="span span1"
                      @click="del(scope.$index, fileListTxrzxx)"
                      >删除</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="title">
            <h6></h6>
            产品认证信息
            <el-tooltip class="item" effect="dark" content="" placement="top">
              <div slot="content">
                CQC标识认证、CCC产品认证、环保认证、资源节约（节能、节水）认证、低碳产品认证、<br />国家推行自愿性产品认证（国推RoHS），CB认证、CE认证、RoHS认证、PSE认证、<br />出口沙特认证、GC标识认证、能源之星认证（美国EPA），中国有机产品认证、<br />中国良好农业规范认证、GLOBALGAP认证、HACCP认证、ISO22000认证、<br />食品安全体系认证（FSSC22000）、乳制品HACCP/GMP认证、绿色市场认证等
              </div>
              <h1><img src="@/assets/image/提示.png" alt="" /></h1>
            </el-tooltip>
          </div>
          <div class="f2_contents">
            <div class="license license1" style="">
              <el-upload
                multiple
                action="#"
                class="upload-demo"
                :auto-upload="false"
                :on-change="handleChangeBusinessWmcprz"
                :http-request="uploadFileBusiness"
                :file-list="fileListWmcprzList"
                :limit="limit"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>

                <div slot="tip" class="el-upload__tip">
                  （1.上传文件大小不超过5M；2.支持上传多个文件。）
                </div>
              </el-upload>
            </div>
            <!-- 表格 -->
            <div id="datatable" v-if="fileListWmcprz.length != 0">
              <el-table
                :data="fileListWmcprz"
                border
                style="width: 800px"
                stripe
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D',
                }"
              >
                <el-table-column
                  prop=""
                  label="序号"
                  min-width="8%"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="oldfilename"
                  label="文件名称"
                  align="center"
                  min-width="50%"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  min-width="20%"
                >
                  <template slot-scope="scope">
                    <span
                      class="span"
                      @click="examine(scope.$index, fileListWmcprz)"
                      >查看</span
                    >
                    <span
                      class="span span1"
                      @click="del(scope.$index, fileListWmcprz)"
                      >删除</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="title">
            <h6></h6>
            进出口资质信息
          </div>
          <div class="f2_contents">
            <div class="license license1" style="">
              <el-upload
                multiple
                action="#"
                class="upload-demo"
                :auto-upload="false"
                :on-change="handleChangeBusinessJckzzxx"
                :http-request="uploadFileBusiness"
                :file-list="fileListJckzzxxList"
                :limit="limit"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  （1.上传文件大小不超过5M；2.支持上传多个文件。）
                </div>
              </el-upload>
            </div>
            <!-- 表格 -->
            <div id="datatable" v-if="fileListJckzzxx.length != 0">
              <el-table
                :data="fileListJckzzxx"
                border
                style="width: 800px"
                stripe
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D',
                }"
              >
                <el-table-column
                  prop=""
                  label="序号"
                  min-width="8%"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="oldfilename"
                  label="文件名称"
                  align="center"
                  min-width="50%"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  min-width="20%"
                >
                  <template slot-scope="scope">
                    <span
                      class="span"
                      @click="examine(scope.$index, fileListJckzzxx)"
                      >查看</span
                    >
                    <span
                      class="span span1"
                      @click="del(scope.$index, fileListJckzzxx)"
                      >删除</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="title">
            <h6></h6>
            荣誉信息
          </div>
          <div class="f2_contents">
            <div class="license license1" style="">
              <el-upload
                multiple
                action="#"
                class="upload-demo"
                :auto-upload="false"
                :on-change="handleChangeBusinessRyxx"
                :http-request="uploadFileBusiness"
                :file-list="fileListRyxxList"
                :limit="limit"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  （1.上传文件大小不超过5M；2.支持上传多个文件。）
                </div>
              </el-upload>
            </div>
            <!-- 表格 -->
            <div id="datatable" v-if="fileListRyxx.length != 0">
              <el-table
                :data="fileListRyxx"
                border
                style="width: 800px"
                stripe
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D',
                }"
              >
                <el-table-column
                  prop=""
                  label="序号"
                  min-width="8%"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="oldfilename"
                  label="文件名称"
                  align="center"
                  min-width="50%"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  min-width="20%"
                >
                  <template slot-scope="scope">
                    <span
                      class="span"
                      @click="examine(scope.$index, fileListRyxx)"
                      >查看</span
                    >
                    <span
                      class="span span1"
                      @click="del(scope.$index, fileListRyxx)"
                      >删除</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>

        <div class="btn">
          <button class="last" @click="lastStep">上一步</button>
          <button class="next" :disabled="isLock" @click="nextStep">
            下一步
          </button>
        </div>
      </div>
      <!-- 弹窗 -->
      <el-dialog :visible.sync="dialogVisible" v-viewer>
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { info, files, del } from "@/api/authentication/index.js";
import axios from "axios";
import Cookies from "js-cookie";
import { baseURL } from "@/utils/http";
export default {
  data() {
    return {
      filepath: [],
      loading: false,
      list: [
        {
          num: "01",
          str: "基本信息",
        },
        {
          num: "02",
          str: "资质信息",
        },
        {
          num: "03",
          str: "财务信息",
        },
        {
          num: "04",
          str: "信用信息",
        },
        {
          num: "05",
          str: "授权信息采集",
        },
        {
          num: "06",
          str: "预览并提交",
        },
      ],
      figure: 10,
      status: true,
      YWXGXZXKZS: [],
      isLock: false,
      limit: 99,
      fileListBusiness: [], //证件文件
      fileListZlxx: [], //专利信息
      fileListZlxxList: [],
      fileListSbxx: [], //商标信息
      fileListSbxxList: [],
      fileListGxjsrz: [], //高新技术认证
      fileListGxjsrzList: [],
      fileListTxrzxx: [], //体系认证信息
      fileListTxrzxxList: [],
      fileListWmcprz: [], //外贸产品认证信息
      fileListWmcprzList: [],
      fileListJckzzxx: [], //进出口资质信息
      fileListJckzzxxList: [],
      fileListRyxx: [], //荣誉信息
      fileListRyxxList: [],
      dialogVisible: false,
      dialogImageUrl: "",
      fileList: [],
      ruleForm: {
        rzid: "",
        xgxzxk: "是",
        xzxkmc: "",
        xzxkjdwbh: "",
        yxqz: "",
      },
      rules: {
        xgxzxk: [
          {
            required: true,
            message: "请输选择是否有相关行政许可",
            trigger: "blur",
          },
        ],
        xzxkmc: [
          { required: true, message: "请输入行政许可名称", trigger: "blur" },
        ],
        xzxkjdwbh: [
          {
            required: true,
            message: "请输入行政许可决定书文编号",
            trigger: "blur",
          },
        ],
        yxqz: [{ required: true, message: "请输入有效起至", trigger: "blur" }],
      },
    };
  },
  mounted() {
    document.documentElement.scrollTop = 0;
    this.ruleForm.rzid = sessionStorage.getItem("rzid");
    this.getInfo();
    this.getFiles();
  },
  methods: {
    goHome() {
      this.$router.push("/");
    },
    upload(url, another, oldfilename) {
      let _this = this;
      axios({
        method: "get",
        url: url, // 替换为文件的URL
        responseType: "blob", // 设置响应类型为Blob
      })
        .then(async function (response) {
          if (response.status === 200) {
            const blobData = response.data; // 获取Blob数据
            // 现在你可以对Blob数据执行任何需要的操作，例如保存它或者展示它
            if (!another) {
              another = [];
            }
            let f = _this.blobToFile(blobData, oldfilename);
            let e = {
              name: oldfilename,
              percentage: 0,
              raw: f,
              size: blobData.size,
              status: "ready",
              uid: "",
              url: url,
            };
            another.push(e);
          } else {
            console.error("获取文件失败");
          }
        })
        .catch(function (error) {
          console.error("发生错误:", error);
        });
      return another;
    },
    blobToFile(blob, fileName, lastModified) {
      const options = {
        type: blob.type,
        lastModified: lastModified || Date.now(),
      };

      // 创建一个新的File对象
      try {
        return new File([blob], fileName, options);
      } catch (e) {
        // 在一些浏览器中，File构造函数可能不可用，因此我们可以使用Blob作为备选方案
        const blobWithFileProperties = new Blob([blob], options);
        blobWithFileProperties.name = fileName;
        return blobWithFileProperties;
      }
    },
    // --------------------------------------------------------------------
    // 获取信息
    getInfo() {
      let rzid = this.ruleForm.rzid;
      if (rzid == "") return;
      info(this.ruleForm.rzid).then((res) => {
        if (res.msg == "操作成功") {
          if (res.data.adminlicense == null) {
            this.ruleForm.xgxzxk = "是";
          } else {
            this.ruleForm.xgxzxk = res.data.adminlicense;
          }
          this.ruleForm.xzxkjdwbh = res.data.adminlicensenumber;
          this.ruleForm.xzxkmc = res.data.adminlicensename;
          this.ruleForm.yxqz = res.data.effectiveuntil;
        }
      });
    },

    // 获取文件
    getFiles() {
      let rzid = this.ruleForm.rzid;
      if (rzid == "") return (this.status = true);
      files(rzid).then((res) => {
        if (res.msg == "操作成功") {
          let filepath = res.data;
          let aaa = true;
          filepath.forEach((item) => {
            if (item.objecttype == "YWXGXZXKZS" && aaa) {
              let a = this.upload(
                item.filepath,
                this.YWXGXZXKZS,
                item.newfilename
              );
              this.fileListBusiness = a;
              this.filepath.push(item);
              aaa = false;
            } else if (item.objecttype == "ZLXX") {
              this.fileListZlxx.push(item);
            } else if (item.objecttype == "SBXX") {
              this.fileListSbxx.push(item);
            } else if (item.objecttype == "GXJSRZ") {
              this.fileListGxjsrz.push(item);
            } else if (item.objecttype == "TXRZ") {
              this.fileListTxrzxx.push(item);
            } else if (item.objecttype == "WMCPRZ") {
              this.fileListWmcprz.push(item);
            } else if (item.objecttype == "JCKZZ") {
              this.fileListJckzzxx.push(item);
            } else if (item.objecttype == "RYXX") {
              this.fileListRyxx.push(item);
            }
          });
        }
      });
    },

    open(filepath) {
      window.open(filepath);
    },
    // 查看
    examine(index, data) {
      let val = data[index];
      let name = data[index].newfilename.split(".")[1];
      let imgUrlStr = val.filepath;
      if (name == "jpg" || name == "png") {
        const a = document.createElement("a"); // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
        a.setAttribute("target", "_blank");
        a.href = val.filepath;
        a.click();
      } else {
        fetch(imgUrlStr).then((res) =>
          res.blob().then((blob) => {
            const a = document.createElement("a"), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
              url = window.URL.createObjectURL(blob),
              filename = val.newfilename;
            a.href = url;
            a.download = filename;
            a.click();
            window.URL.revokeObjectURL(url);
          })
        );
      }
    },
    // 文件上传
    uploadingFile(fileList, newfilename) {
      let formData = new FormData();
      fileList.forEach((file) => {
        formData.append("file", file.raw);
      });
      let token = localStorage.getItem("token");
      let url = baseURL + `/credit/auth/saveFile?newfilename=${newfilename}`;
      axios
        .post(url, formData, {
          headers: { "Content-Type": "multipart/form-data", "x-auth": token },
        })
        .then((res) => {
          if (res.data.msg == "操作成功") {
            for (let i = 0; i < res.data.data.length; i++) {
              this.filepath.push({
                newfilename: res.data.data[i].newfilename,
                filepath: res.data.data[i].filepath,
                serialno: res.data.data[i].serialno,
                uid: fileList[i].uid,
              });
            }
            return;
          }
          this.$Message.error("操作失败");
        });
    },
    delFile(file) {
      let index = "";
      for (let i = 0; i < this.filepath.length; i++) {
        if (
          this.filepath[i].filepath == file.url ||
          this.filepath[i].uid == file.uid
        ) {
          index = i;
          this.filepath.splice(index, 1);
          return;
        }
      }
    },
    delFileList(id, list, index) {
      del(id).then((res) => {
        if (res.msg == "操作成功") {
          list.splice(index, 1);
          if (list.length == 0) return (list = []);
        }
      });
    },
    //删除表格信息
    del(index, data) {
      this.delFileList(data[index].serialno, data, index);
    },

    group(event) {
      if (event == "是") {
        this.status = true;
      } else if (event == "否") {
        this.status = false;
      }
    },
    lastStep() {
      this.$router.push("/flow1");
    },
    // 下一步
    nextStep() {
      this.isLock = true;
      setTimeout(() => {
        this.isLock = false;
      }, 3000);

      let { xgxzxk, xzxkmc, xzxkjdwbh, yxqz, rzid } = this.ruleForm;
      let token = localStorage.getItem("token");
      if (xgxzxk == "是") {
        if (
          xgxzxk == "" ||
          xzxkmc == "" ||
          xzxkjdwbh == "" ||
          yxqz == "" ||
          yxqz == null ||
          yxqz == "null"
        ) {
          this.$Message.error("请输入内容");
          return;
        }
        if (this.fileListBusiness.length == 0)
          return this.$Message.error("请输入上传文件");
        let data = {
          adminlicense: xgxzxk,
          adminlicensename: xzxkmc,
          adminlicensenumber: xzxkjdwbh,
          effectiveuntil: yxqz,
          effectiveuntil: yxqz,
          id: rzid,
          certificate: [], //证书文件
          patents: [], //专利信息
          trademarks: [], //商标信息
          highTechs: [], //高新技术认证
          systems: [], //体系认证信息
          tradeProducts: [], //外贸产品认证信息
          importsAndExports: [], //进出口资质信息
          honors: [], //荣排信息”
        };
        for (let i = 0; i < 1; i++) {
          data.certificate.push({
            serialno: this.filepath[i].serialno,
            filepath: this.filepath[i].filepath,
          });
        }
        this.fileListZlxx.forEach((item) => {
          data.patents.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        this.fileListSbxx.forEach((item) => {
          data.trademarks.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        this.fileListGxjsrz.forEach((item) => {
          data.highTechs.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        this.fileListTxrzxx.forEach((item) => {
          data.systems.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        this.fileListWmcprz.forEach((item) => {
          data.tradeProducts.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        this.fileListJckzzxx.forEach((item) => {
          data.importsAndExports.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        this.fileListRyxx.forEach((item) => {
          data.honors.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        let url = baseURL + `/credit/auth/two`;
        axios
          .post(url, data, {
            headers: { "Content-Type": "application/json", "x-auth": token },
          })
          .then((res) => {
            if (res.data.msg == "操作成功") {
              this.$router.push("/flow3");
              this.loading = false;
              return;
            }
            this.$Message.error("操作失败");
            this.loading = false;
          });
        return;
      } else {
        let data = {
          adminlicense: xgxzxk,
          id: rzid,
          certificate: [], //证书文件
          patents: [], //专利信息
          trademarks: [], //商标信息
          highTechs: [], //高新技术认证
          systems: [], //体系认证信息
          tradeProducts: [], //外贸产品认证信息
          importsAndExports: [], //进出口资质信息
          honors: [], //荣排信息”
        };
        // 调用接口
        this.fileListZlxx.forEach((item) => {
          data.patents.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        this.fileListSbxx.forEach((item) => {
          data.trademarks.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        this.fileListGxjsrz.forEach((item) => {
          data.highTechs.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        this.fileListTxrzxx.forEach((item) => {
          data.systems.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        this.fileListWmcprz.forEach((item) => {
          data.tradeProducts.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        this.fileListJckzzxx.forEach((item) => {
          data.importsAndExports.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        this.fileListRyxx.forEach((item) => {
          data.honors.push({
            serialno: item.serialno,
            filepath: item.filepath,
          });
        });
        let url = baseURL + `/credit/auth/two`;
        axios
          .post(url, data, {
            headers: { "Content-Type": "application/json", "x-auth": token },
          })
          .then((res) => {
            if (res.data.msg == "操作成功") {
              this.$router.push("/flow3");
              return;
            }
            this.$Message.error("操作失败");
          });
      }
    },
    // 营业执照------------------------------------------------
    handleChangeBusiness(file, fileList) {
      this.fileListBusiness = fileList[0].raw;
      this.uploadingFile(fileList, "业务相关行政许可");
    },
    //自定义上传文件
    uploadFileBusiness(file) {
      return;
    },
    // 删除营业执照缩略图
    handleRemove1(file) {
      this.$refs.pictureUpload1.handleRemove(file);
      this.delFile(file);
      this.fileListBusiness = [];
    },
    // 查看缩略图
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //自定义上传文件
    uploadFileBusiness(file) {
      return;
    },
    // 文件上传 专利信息
    uploadingFileZlxx(fileList, newfilename, name) {
      let formData = new FormData();
      fileList.forEach((file) => {
        formData.append("file", file.raw);
      });
      let token = localStorage.getItem("token");
      let url = baseURL + `/credit/auth/saveFile?newfilename=${newfilename}`;
      axios
        .post(url, formData, {
          headers: { "Content-Type": "multipart/form-data", "x-auth": token },
        })
        .then((res) => {
          if (res.data.msg == "操作成功") {
            for (let i = 0; i < res.data.data.length; i++) {
              this.fileListZlxx.push({
                newfilename: res.data.data[i].newfilename,
                filepath: res.data.data[i].filepath,
                serialno: res.data.data[i].serialno,
                uid: fileList[i].uid,
                oldfilename: name,
              });
            }
            return;
          }
          this.$Message.error("操作失败");
        });
    },
    // 专利信息
    handleChangeBusinessZlxx(file, fileList) {
      this.fileListZlxxList.push(file);
      // this.fileListZlxx = this.fileListZlxxList;
      let a = [];
      a.push(file);
      this.uploadingFileZlxx(a, "专利信息", file.name);
    },
    //------------------------------------------------------
    // 文件上传 商标信息
    uploadingFileSbxx(fileList, newfilename, name) {
      let formData = new FormData();
      fileList.forEach((file) => {
        formData.append("file", file.raw);
      });
      let token = localStorage.getItem("token");
      let url = baseURL + `/credit/auth/saveFile?newfilename=${newfilename}`;
      axios
        .post(url, formData, {
          headers: { "Content-Type": "multipart/form-data", "x-auth": token },
        })
        .then((res) => {
          if (res.data.msg == "操作成功") {
            for (let i = 0; i < res.data.data.length; i++) {
              this.fileListSbxx.push({
                newfilename: res.data.data[i].newfilename,
                filepath: res.data.data[i].filepath,
                serialno: res.data.data[i].serialno,
                uid: fileList[i].uid,
                oldfilename: name,
              });
            }
            return;
          }
          this.$Message.error("操作失败");
        });
    },
    // 商标信息
    handleChangeBusinessSbxx(file, fileList) {
      this.fileListSbxxList.push(file);
      // this.fileListSbxx = this.fileListSbxxList;
      let a = [];
      a.push(file);
      this.uploadingFileSbxx(a, "商标信息", file.name);
    },
    //------------------------------------------------------
    // 高新技术认证
    // 文件上传 高新技术认证
    uploadingFileGxjsrz(fileList, newfilename, name) {
      let formData = new FormData();
      fileList.forEach((file) => {
        formData.append("file", file.raw);
      });
      let token = localStorage.getItem("token");
      let url = baseURL + `/credit/auth/saveFile?newfilename=${newfilename}`;
      axios
        .post(url, formData, {
          headers: { "Content-Type": "multipart/form-data", "x-auth": token },
        })
        .then((res) => {
          if (res.data.msg == "操作成功") {
            for (let i = 0; i < res.data.data.length; i++) {
              this.fileListGxjsrz.push({
                newfilename: res.data.data[i].newfilename,
                filepath: res.data.data[i].filepath,
                serialno: res.data.data[i].serialno,
                uid: fileList[i].uid,
                oldfilename: name,
              });
            }
            return;
          }
          this.$Message.error("操作失败");
        });
    },
    handleChangeBusinessGxjsrz(file, fileList) {
      this.fileListGxjsrzList.push(file);
      // this.fileListGxjsrz = this.fileListGxjsrzList;
      let a = [];
      a.push(file);
      this.uploadingFileGxjsrz(a, "高新技术认证", file.name);
    },

    //------------------------------------------------------
    // 体系认证信息
    // 文件上传 体系认证信息
    uploadingFileTxrzxx(fileList, newfilename, name) {
      let formData = new FormData();
      fileList.forEach((file) => {
        formData.append("file", file.raw);
      });
      let token = localStorage.getItem("token");
      let url = baseURL + `/credit/auth/saveFile?newfilename=${newfilename}`;
      axios
        .post(url, formData, {
          headers: { "Content-Type": "multipart/form-data", "x-auth": token },
        })
        .then((res) => {
          if (res.data.msg == "操作成功") {
            for (let i = 0; i < res.data.data.length; i++) {
              this.fileListTxrzxx.push({
                newfilename: res.data.data[i].newfilename,
                filepath: res.data.data[i].filepath,
                serialno: res.data.data[i].serialno,
                uid: fileList[i].uid,
                oldfilename: name,
              });
            }
            return;
          }
          this.$Message.error("操作失败");
        });
    },
    handleChangeBusinessTxrzxx(file, fileList) {
      this.fileListTxrzxxList.push(file);
      // this.fileListTxrzxx = this.fileListTxrzxxList;
      let a = [];
      a.push(file);
      this.uploadingFileTxrzxx(a, "体系认证信息", file.name);
    },

    //------------------------------------------------------
    // 文件上传 外贸产品认证信息
    uploadingFileWmcprz(fileList, newfilename, name) {
      let formData = new FormData();
      fileList.forEach((file) => {
        formData.append("file", file.raw);
      });
      let token = localStorage.getItem("token");
      let url = baseURL + `/credit/auth/saveFile?newfilename=${newfilename}`;
      axios
        .post(url, formData, {
          headers: { "Content-Type": "multipart/form-data", "x-auth": token },
        })
        .then((res) => {
          if (res.data.msg == "操作成功") {
            for (let i = 0; i < res.data.data.length; i++) {
              this.fileListWmcprz.push({
                newfilename: res.data.data[i].newfilename,
                filepath: res.data.data[i].filepath,
                serialno: res.data.data[i].serialno,
                uid: fileList[i].uid,
                oldfilename: name,
              });
            }
            return;
          }
          this.$Message.error("操作失败");
        });
    },
    // 外贸产品认证信息
    handleChangeBusinessWmcprz(file, fileList) {
      this.fileListWmcprzList.push(file);
      // this.fileListWmcprz = this.fileListWmcprzList;
      let a = [];
      a.push(file);
      this.uploadingFileWmcprz(a, "外贸产品认证信息", file.name);
    },
    //------------------------------------------------------
    // 进出口资质信息
    // 文件上传 进出口资质信息
    uploadingFileJckzzxx(fileList, newfilename, name) {
      let formData = new FormData();
      fileList.forEach((file) => {
        formData.append("file", file.raw);
      });
      let token = localStorage.getItem("token");
      let url = baseURL + `/credit/auth/saveFile?newfilename=${newfilename}`;
      axios
        .post(url, formData, {
          headers: { "Content-Type": "multipart/form-data", "x-auth": token },
        })
        .then((res) => {
          if (res.data.msg == "操作成功") {
            for (let i = 0; i < res.data.data.length; i++) {
              this.fileListJckzzxx.push({
                newfilename: res.data.data[i].newfilename,
                filepath: res.data.data[i].filepath,
                serialno: res.data.data[i].serialno,
                uid: fileList[i].uid,
                oldfilename: name,
              });
            }
            return;
          }
          this.$Message.error("操作失败");
        });
    },
    handleChangeBusinessJckzzxx(file, fileList) {
      this.fileListJckzzxxList.push(file);
      // this.fileListJckzzxx = this.fileListJckzzxxList;
      let a = [];
      a.push(file);
      this.uploadingFileJckzzxx(a, "进出口资质信息", file.name);
    },
    // 荣誉信息
    // 文件上传  荣誉信息
    uploadingFileRyxx(fileList, newfilename, name) {
      let formData = new FormData();
      fileList.forEach((file) => {
        formData.append("file", file.raw);
      });
      let token = localStorage.getItem("token");
      let url = baseURL + `/credit/auth/saveFile?newfilename=${newfilename}`;
      axios
        .post(url, formData, {
          headers: { "Content-Type": "multipart/form-data", "x-auth": token },
        })
        .then((res) => {
          if (res.data.msg == "操作成功") {
            for (let i = 0; i < res.data.data.length; i++) {
              this.fileListRyxx.push({
                newfilename: res.data.data[i].newfilename,
                filepath: res.data.data[i].filepath,
                serialno: res.data.data[i].serialno,
                uid: fileList[i].uid,
                oldfilename: name,
              });
            }
            return;
          }
          this.$Message.error("操作失败");
        });
    },
    handleChangeBusinessRyxx(file, fileList) {
      this.fileListRyxxList.push(file);
      // this.fileListRyxx = this.fileListRyxxList;
      let a = [];
      a.push(file);
      this.uploadingFileRyxx(a, "荣誉信息", file.name);
    },
  },
};
</script>
<style lang="scss" scoped>
ul {
  list-style: none;
}
.license-right1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  div {
    p {
      font-size: 12px;
      line-height: 24px;
    }
  }
}
.box {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 80px;
  background: #f5f7fa;
  .f1 {
    width: 100%;
    height: 138px;
    background: #f0f1f7;
    .f1_content {
      position: relative;
      margin: 0 auto;
      width: 1200px;
      height: 100%;
      .goHome {
        display: flex;
        align-items: center;
        height: 25px;
        cursor: pointer;
        z-index: 9999;
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 16px;
        font-weight: 500;
        color: #616060;
        img {
          width: 24px;
          // height: 24px;
        }
      }
      ul {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        li {
          h6 {
            font-size: 14px;
            font-weight: 400;
            color: #515151;
            margin-bottom: 5px;
            span {
              font-size: 22px;
              font-family: Britannic Bold;
              font-weight: 500;
              color: #000000;
            }
          }
          .quan {
            width: 24px;
            height: 24px;
          }
          .line {
            width: 123px;
            height: 3px;
          }
        }
      }
    }
  }
  .f2 {
    box-sizing: border-box;
    padding: 40px 40px 40px 80px;

    margin: 0 auto;
    width: 1200px;
    background-color: #fff;
    .content {
      box-sizing: border-box;
      padding: 30px 20px 50px 20px;
      margin: 0 auto;
      height: 100%;
      .f2_content {
        box-sizing: border-box;
        padding: 40px 0px;
      }
      .f2_contents {
        box-sizing: border-box;
        padding: 40px 0;
      }
      .hint {
        box-sizing: border-box;
        padding: 0 10px;
        display: flex;
        align-items: center;
        background-color: #ededed;
        font-size: 12px;
        font-family: Source Han Sans SC;
        font-weight: 300;
        color: #909090;
        margin-left: 10px;
      }
      .title {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        h6 {
          width: 5px;
          height: 18px;
          background-color: #0a7be0;
          margin-right: 10px;
        }
        h1 {
          display: flex;
          align-items: center;
          margin-left: 10px;
          img {
            width: 22px;
          }
        }
      }

      // 按钮
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 50px;
        margin-top: 80px;
        .last {
          width: 160px;
          height: 36px;
          background: #0a7be0;
          opacity: 0.3;
          border-radius: 4px;
        }
        .next {
          width: 160px;
          height: 36px;
          background: #0a7be0;
          border-radius: 4px;
        }
        // margin-bottom: 140px;
        button {
          cursor: pointer;
          align-items: center;
          justify-content: center;
          display: flex;
          border-radius: 5px;
          width: 180px;
          height: 50px;
          color: #fff;
          margin-left: 30px;
          border: 0;
        }
      }
    }

    // 营业执照
    // 身份证正反面
    .license {
      display: flex;
      margin-bottom: 20px;
      margin-left: 25px;

      .aaa {
        width: 77px;
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #999999;
      }

      .permit {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        width: 212px;
        height: 121px;
        background: url(@/assets/flow/组86.png) no-repeat;
        background-size: 100% 100%;
        margin-right: 15px;
        overflow: hidden;
        cursor: pointer;
        img {
          width: 212px;
          height: 100%;
        }
      }

      // .permit-front {
      //   background: url(@/assets/flow/组86.png) no-repeat;
      //   background-size: 100% 100%;
      // }

      // .permit-reverse {
      //   background: url(@/assets/flow/组86.png) no-repeat;
      //   background-size: 100% 100%;
      // }

      .card {
        width: 216px;
        height: 123px;
        margin-right: 8px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .license-right {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        div {
          width: 100%;

          p {
            font-size: 14px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #999999;
            line-height: 24px;
          }
        }
      }
    }

    .license1 {
      .aaa11 {
        font-size: 14px;
        font-weight: 700;
        color: #606266;
        width: 130px;
        text-align: right;
        padding: 0px 14px;
      }
    }
  }
}
// 操作按钮
.span {
  display: inline-block;
  font-size: 15px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  margin-right: 5px;
  color: #0a7be0;
  border-bottom: 1px solid #0a7be0;
  cursor: pointer;
  margin-right: 20px;
}
.span1 {
  margin-right: 0;
  color: #ff4040;
  border-bottom: 1px solid #ff4040;
}
::v-deep .el-upload-list--picture .el-upload-list__item-thumbnail {
  width: 140px;
}

::v-deep .el-upload-list--picture .el-upload-list__item-name {
  display: none;
}

::v-deep .upload-demo .el-upload-list {
  display: none;
}

::v-deep .upload-demo {
  display: flex;
}

::v-deep .el-upload__tip {
  margin-left: 15px;
}

::v-deep .el-upload-list--picture .el-upload-list__item {
  width: 180px;
  margin-right: 15px;
}
//
::v-deep .el-form-item__label {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}
::v-deep .el-form-item {
  margin-bottom: 22px;
}
/* 输入框样式  */
::v-deep .el-input__inner {
  font-size: 12px;
  box-sizing: border-box;
  width: 500px;

  height: 39px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
::v-deep .el-icon-date:before {
  content: "";
}
::v-deep .el-upload__tip {
  font-size: 12px;
}
::v-deep .el-form-item__error {
  font-size: 12px;
}
</style>
<style lang="scss">
// 上传
.el-upload--picture-card {
  background-color: rgba(245, 245, 245, 0.1);
  border: 0;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 100%;
  height: 160px;
  display: flex;
  margin: 0;
  z-index: 888;
}

.el-dialog__header {
  border: 0px;
}
</style>
